
import React, { useState, useRef, useImperativeHandle, forwardRef, } from 'react';
import { Input, Modal } from 'antd';
import Jodit, { JoditRef } from '../../../components/fd/components/richText/Jodit';

import style from './style.module.scss';

interface RefProps {
  setData: (v: object) => void;
}

export default forwardRef(({ onSave: _onSave }: { onSave: (v: object) => void; }, ref: React.Ref<RefProps>) => {

  const joditRef = useRef<JoditRef>(null);

  const [informContent, setInformContent] = useState(''); //邮件
  // const [informTitle, setInformTitle] = useState(''); // 邮件
  const [visible, setVisible] = useState(false);

  useImperativeHandle(ref, () => ({
    setData(data: any) {
      setVisible(true);
      // setInformTitle(data.informTitle);
      setInformContent(data.informContent);
    },
  }));

  const onSave = async () => {
    const content = joditRef.current?.getValue();
    setVisible(false);
    _onSave({
      // informTitle,
      informContent: content
    });
  };

  return (
    <Modal title={window.$app.t('mailBody')} destroyOnClose bodyStyle={{ maxHeight: '500px', overflowY: 'auto' }} visible={visible} width={900} centered onOk={onSave} onCancel={() => setVisible(false)}>
      <div className='common-block'>
        {/* <div className={style.div} style={{ alignItems: 'center' }}>
          <span className={style.title}>邮件标题</span>
          <Input
            onChange={e => setInformTitle(e.target.value)}
            value={informTitle}
            className={style.input}
            placeholder='请输入固定文字和变量'
          />
        </div> */}
        <div className={style.div}>
          <span className={style.title}>{window.$app.t('mailBody')}</span>
          <div className={style.input}>
            <Jodit
              placeholder={window.$app.t('plsFixedContent')}
              ref={joditRef}
              initialValue={informContent || ''}
              height={400} />
          </div>
        </div>
      </div>
    </Modal>
  );
});